<template>
<div class="main">
  <!-- 头部导航栏 -->
  <head-component :noBack="false"  title="产品攻略"/>
  <!-- tab切换任务栏 -->
  <div class="nav">
    <div class="tab">
      <div class="f32" :class="type === 1 && 'active'" @click="changeType(1)">贷款中心</div>
      <div class="f32" :class="type === 2 && 'active'" @click="changeType(2)">信用卡</div>
    </div>
  </div>
  <div class="con">
    <div class="list"  v-for="(item,i) in list" :key="i" @click="toPage(item.p_id,item.p_title)" >
      <img :src="item.p_img" alt="">
      <p class="f30 col_33 oneline">{{item.p_name}}</p>
      <div class="f24 col_99 twoLine">{{item.p_title}}</div>
    </div>
    <!-- 如果内容列表为空 -->
    <div class="null_list" v-if="list == ''">
      <img class="null_img" src="@/common/icon/nothing.png" alt="">
      <div class="null_title">暂无数据</div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  components: {
    'headComponent':()=>import('@/components/layout/head')
  },
  name: "gonglue.vue",
  data() {
    return {
      type: 1,
      list:[],
      userStatus:0,
    }
  },
  created(){
      var $this = this;
      $this.getList(1);
    //  个人信息
    var data2 = {u_id: localStorage.getItem('uid'),token:localStorage.getItem('token')};
    $this.$axios.post('index.php?m=user&c=index',data2)
      .then((res) => {
        if(res.data.code == 1){
          this.userStatus = res.data.user.m_level;
        }else{
          this.$router.push('/login');
        }
      });
  },
  methods:{
    changeType(type){
      var $this = this;
      $this.type = type;
      $this.list = [];
      $this.getList();
    },
    getList() {
      var $this = this;
      var t = this.$toast.loading({message: '正在加载数据', mask: true, duration: 9999})
      var data = {u_id: localStorage.getItem('uid'), token: localStorage.getItem('token'), type: $this.type};
      $this.$axios.post('index.php?m=index&c=product_s', data)
        .then((res) => {
          t.clear();
          if (res.data.code == 1) {
            res.data.res.map((item, index) => {
              let obj=item;
              $this.list.unshift(obj);
            })
          } else {
            $this.$toast({
              message: '请先登录',
              duration: 800,
              onClose:()=>{
                $this.$router.push('/login');
              }
            })
          }
        })
    },

    toPage(id, title){
      var $this = this;
      if($this.userStatus != 0){
        $this.$router.push({path:'/gonglueD', query:{id:id, title:title}})
      }else{
        $this.$toast({
          message: '请先开通VIP',
          duration: 800,
          onClose: ()=> {
            $this.$router.push('/vip');
          }
        })
      }
    },
  },


}
</script>

<style scoped lang="less">
  .main{width: 100%;height: 100%;background: #f5f5f5;overflow: scroll}
  .layout-head{background: #fff}
  .oneline{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
  .twoLine{overflow:hidden;display:-webkit-box;text-overflow: ellipsis;-webkit-line-clamp:2;-webkit-box-orient: vertical;white-space: normal;}
  // tab切换状态部分
  .nav{width: 100%;position: fixed;
    .tab{
      margin-top: 1.2rem;
      padding: 0 0.4rem;
      height: 1.2rem;
      display: flex;
      display:-webkit-flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: space-around;
      -webkit-justify-content: space-around;
      background: #fff;
      .active{
        color: #409aff;
        position: relative;
        &::before{
          content: '';
          position: absolute;
          bottom: -0.1rem;
          left: 18%;
          width: 60%;
          height: 0.053rem;
          background: #409aff;
        }
      }
    }
  }
  .con{
    width: 92%;
    margin: 2.8rem auto 0;
    overflow-y: scroll;
    .list{
      width: 2.87rem;
      float: left;
      background: #fff;
      margin-right: 0.266rem;
      padding: 0.4rem 0 0.26rem;
      text-align: center;
      border-radius: 0.16rem;
      overflow: hidden;
      margin-bottom: 0.4rem;
      img{
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 0.12rem;
        margin: 0 auto;
        display: block;
      }
      p{margin: 0.266rem 0 0.1333rem;padding: 0 0.26rem;}
      div{height: 0.9rem;padding: 0 0.26rem;}
    }
    .list:nth-child(3n+3){margin-right: 0;}
  }
</style>
